<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="排序">
          <el-select v-model="form.bannerSort" placeholder="请选择活动区域">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择文件">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="轮播名称">
          <el-input v-model="form.bannerName" placeholder="请输入分类名称"></el-input>
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="form.bannerLink" placeholder="请输入链接地址"></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-radio-group v-model="form.bannerState">
            <el-radio label="显示"></el-radio>
            <el-radio label="隐藏"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" >确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
    </el-form> 
  </div>
</template>

<script>
import {editBannerList, getBannerId} from '../../../api'
 export default {
    props:["editid"],
    data() {
      return {
        form: {},
        // 遮罩层选择文件
        fileList: [
          { name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },
          { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },
        ],
      }
    },
    created(){
      getBannerId(this.editid).then((res)=>{
        console.log(res);
        if(res.code ==200){
          this.form = res.data
        }
      })
    },
    methods: {
      // 遮罩层表单
      onSubmit() {
        console.log('submit!')
        console.log(this.form)
        editBannerList(this.form).then(res => {
          console.log(res)
          if(res.code == 200){
            this.form = res.data
            this.$emit('setAppear',false)
          }
        })
      },
      cancel() {
        this.$emit('setAppear',false)
      },
      // 遮罩层上传文件
      submitUpload() {
          this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
          console.log(file, fileList);
      },
      handlePreview(file) {
          console.log(file);
      },
        // 模态框
      handleClose(done) {
      this.$confirm('确认关闭？')
          .then((_) => {
          done()
          })
          .catch((_) => {})
      },
    },
    
  }
</script>

<style>

</style>